import React from "react";
import PropTypes from "prop-types";
import DocumentTitle from "react-document-title";
import {connect} from "dva";
import {Link, Route, Redirect, Switch} from "dva/router";
import {Layout, Menu, Icon, Avatar, Dropdown, Tag, message, Spin, Button} from "antd";
import NoticeIcon from "ant-design-pro/lib/NoticeIcon";
import {Breadcrumb} from 'antd';
import moment from "moment";
import groupBy from "lodash/groupBy";
import classNames from "classnames";
import {ContainerQuery} from "react-container-query";
import styles from "./MapLayout.less";
import  ICL1Menu from '../components/ICL1Menu';

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

const query = {
    'screen-xs': {
        maxWidth: 575,
    },
    'screen-sm': {
        minWidth: 576,
        maxWidth: 767,
    },
    'screen-md': {
        minWidth: 768,
        maxWidth: 991,
    },
    'screen-lg': {
        minWidth: 992,
        maxWidth: 1199,
    },
    'screen-xl': {
        minWidth: 1200,
    },
};

class MapLayout extends React.PureComponent {
    static childContextTypes = {
        location: PropTypes.object,
        breadcrumbNameMap: PropTypes.object,
    }
    constructor(props) {
        super(props);
        // 把一级 Layout 的 children 作为菜单项
        this.menus = props.navData
            .filter(x=>x.layout=='MapLayout')
            .reduce((arr, current) => arr.concat(current.children), []);
        this.state = {
            openKeys: this.getDefaultCollapsedSubMenus(props),
            isFullScreen:false
        };
    }
    getChildContext() {
        const { location, navData, getRouteData } = this.props;
        const routeData = getRouteData('MapLayout');
        const firstMenuData = navData.reduce((arr, current) => arr.concat(current.children), []);
        const menuData = this.getMenuData(firstMenuData, '');
        const breadcrumbNameMap = {};

        routeData.concat(menuData).forEach((item) => {
            breadcrumbNameMap[item.path] = item.name;
        });
        return { location, breadcrumbNameMap };
    }
    componentDidMount() {
        this.props.dispatch({
            type: 'user/fetchCurrent',
        });
    }
    componentWillUnmount() {
        clearTimeout(this.resizeTimeout);
    }
    onCollapse = (collapsed) => {
        this.props.dispatch({
            type: 'global/changeLayoutCollapsed',
            payload: collapsed,
        });
    }
    onMenuClick = ({ key }) => {
        if (key === 'logout') {
            this.props.dispatch({
                type: 'login/logout',
            });
        }
    }
    getMenuData = (data, parentPath) => {
        let arr = [];
        data.forEach((item) => {
            if (item.children) {
                arr.push({ path: `${parentPath}/${item.path}`, name: item.name });
                arr = arr.concat(this.getMenuData(item.children, `${parentPath}/${item.path}`));
            }
        });
        return arr;
    }
    getDefaultCollapsedSubMenus(props) {
        const currentMenuSelectedKeys = [...this.getCurrentMenuSelectedKeys(props)];
        currentMenuSelectedKeys.splice(-1, 1);
        if (currentMenuSelectedKeys.length === 0) {
            return ['dashboard'];
        }
        return currentMenuSelectedKeys;
    }
    getCurrentMenuSelectedKeys(props) {
        const { location: { pathname } } = props || this.props;
        const keys = pathname.split('/').slice(1);
        if (keys.length === 1 && keys[0] === '') {
            return [this.menus[0].key];
        }
        return keys;
    }
    getNavMenuItems(menusData, parentPath = '') {
        if (!menusData) {
            return [];
        }
        return menusData.map((item) => {
            if (!item.name) {
                return null;
            }
            let itemPath;
            if (item.path.indexOf('http') === 0) {
                itemPath = item.path;
            } else {
                itemPath = `${parentPath}/${item.path || ''}`.replace(/\/+/g, '/');
            }
            if (item.children && item.children.some(child => child.name)) {
                return (
                    <SubMenu
                        title={
                            item.icon ? (
                                    <span>
                  <Icon type={item.icon} />
                  <span>{item.name}</span>
                </span>
                                ) : item.name
                        }
                        key={item.key || item.path}
                    >
                        {this.getNavMenuItems(item.children, itemPath)}
                    </SubMenu>
                );
            }
            const icon = item.icon && <Icon type={item.icon} />;
            return (
                <Menu.Item key={item.key || item.path} >
                    {
                        /^https?:\/\//.test(itemPath) ? (
                                <a href={itemPath} target={item.target}>
                                    {icon}<span>{item.name}</span>
                                </a>
                            ) : (
                                <Link
                                    to={itemPath}
                                    target={item.target}
                                    replace={itemPath === this.props.location.pathname}
                                >
                                    {icon}<span>{item.name}</span>
                                </Link>
                            )
                    }
                </Menu.Item>
            );
        });
    }
    getPageTitle() {
        const { location, getRouteData } = this.props;
        const { pathname } = location;
        let title = 'Ant Design Pro';
        getRouteData('MapLayout').forEach((item) => {
            if (item.path === pathname) {
                title = `${item.name} - Ant Design Pro`;
            }
        });
        return title;
    }
    getNoticeData() {
        const { notices = [] } = this.props;
        if (notices.length === 0) {
            return {};
        }
        const newNotices = notices.map((notice) => {
            const newNotice = { ...notice };
            if (newNotice.datetime) {
                newNotice.datetime = moment(notice.datetime).fromNow();
            }
            // transform id to item key
            if (newNotice.id) {
                newNotice.key = newNotice.id;
            }
            if (newNotice.extra && newNotice.status) {
                const color = ({
                    todo: '',
                    processing: 'blue',
                    urgent: 'red',
                    doing: 'gold',
                })[newNotice.status];
                newNotice.extra = <Tag color={color} style={{ marginRight: 0 }}>{newNotice.extra}</Tag>;
            }
            return newNotice;
        });
        return groupBy(newNotices, 'type');
    }
    handleOpenChange = (openKeys) => {
        const lastOpenKey = openKeys[openKeys.length - 1];
        const isMainMenu = this.menus.some(
            item => lastOpenKey && (item.key === lastOpenKey || item.path === lastOpenKey)
        );
        this.setState({
            openKeys: isMainMenu ? [lastOpenKey] : [...openKeys],
        });
    }
    toggle = () => {
        const { collapsed } = this.props;
        this.props.dispatch({
            type: 'global/changeLayoutCollapsed',
            payload: !collapsed,
        });
        this.resizeTimeout = setTimeout(() => {
            const event = document.createEvent('HTMLEvents');
            event.initEvent('resize', true, false);
            window.dispatchEvent(event);
        }, 600);
    }
    handleNoticeClear = (type) => {
        message.success(`清空了${type}`);
        this.props.dispatch({
            type: 'global/clearNotices',
            payload: type,
        });
    }
    handleNoticeVisibleChange = (visible) => {
        if (visible) {
            this.props.dispatch({
                type: 'global/fetchNotices',
            });
        }
    }


    render() {
        const { currentUser, collapsed, fetchingNotices, getRouteData,navData } = this.props;
        const {isFullScreen}=this.state;
        const menu = (
            <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
              <Menu.Item disabled><Icon type="user" />个人中心</Menu.Item>
              <Menu.Item disabled><Icon type="setting" />设置</Menu.Item>
              <Menu.Divider />
              <Menu.Item key="logout"><Icon type="logout" />退出登录</Menu.Item>
            </Menu>
        );
        const noticeData = this.getNoticeData();

        // Don't show popup menu when it is been collapsed
        const menuProps = collapsed ? {} : {
                openKeys: this.state.openKeys,
            };

        const layout = (
            <Layout>
              <div className={styles.header}>
          <span className={styles.logo}>
            <Link to="/">
              <img src="https://gw.alipayobjects.com/zos/rmsportal/iwWyPinUoseUxIAeElSx.svg" alt="logo" />
              <h1>首都广告</h1>
            </Link>
          </span>
                <Icon
                    className={styles.trigger}
                    type={collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={this.toggle}
                />
                <div className={styles.right}>
                    {currentUser.name ? (
                            <Dropdown overlay={menu}>
                  <span className={`${styles.action} ${styles.account}`}>
                    <Avatar size="small" className={styles.avatar} src={currentUser.avatar} />
                      {currentUser.name}
                  </span>
                            </Dropdown>
                        ) : <Spin size="small" style={{ marginLeft: 8 }} />}
                </div>
              </div>
              <Layout>
                <Sider
                    trigger={null}
                    collapsible
                    collapsed={collapsed}
                    breakpoint="md"
                    onCollapse={this.onCollapse}
                    width={200}
                    className={styles.sider}
                >

                  <Menu
                      theme="dark"
                      mode="inline"
                      {...menuProps}
                      onOpenChange={this.handleOpenChange}
                      selectedKeys={this.getCurrentMenuSelectedKeys()}
                      style={{  width: '100%' }}
                  >
                      {this.getNavMenuItems(this.menus)}
                  </Menu>
                </Sider>

                <Content >
                  <div className={styles.pageHeader}>
                    <Breadcrumb separator=">" className={styles.breadcrumb}>
                      <Breadcrumb.Item><Icon type={'home'}/>工作台</Breadcrumb.Item>
                      <Breadcrumb.Item>数据面板</Breadcrumb.Item>
                    </Breadcrumb>
                      <ICL1Menu/>

                  </div>
                  <div>
                    <Switch>
                        {
                            getRouteData('MapLayout').map(item =>
                                (
                                    <Route
                                        exact={item.exact}
                                        key={item.path}
                                        path={item.path}
                                        component={item.component}
                                    />
                                )
                            )
                        }
                      <Redirect exact from="/" to="/table-list" />
                    </Switch>
                  </div>
                </Content>
              </Layout>
            </Layout>
        );

        return (
            <DocumentTitle title={this.getPageTitle()}>
              <ContainerQuery query={query}>
                  {params => <div className={classNames(params)}>{layout}</div>}
              </ContainerQuery>
            </DocumentTitle>
        );
    }
}

export default connect(state => ({
    currentUser: state.user.currentUser,
    collapsed: state.global.collapsed,
    fetchingNotices: state.global.fetchingNotices,
    notices: state.global.notices,
}))(MapLayout);
